<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .big-box{
            width:400px;
            height:400px;
            background: blue;
        }

        .small-box{
            width:200px;
            height:200px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 

            事件修饰符：.prevent 阻止浏览器默认事件  .stop 阻止冒泡  .self 事件只能在本身触发  .once

            表单修饰符：.trim  .number .lazy

            按键修饰符：.enter .tap .up .down .left .right
         -->
        <form>
            <div>
                用户名：<input type="text" placeholder="请输入用户名" v-model.trim.lazy="info.username">
            </div>
            <div>
                年龄：<input type="text" placeholder="请输入年龄" v-model.number="info.age">
            </div>
            <div>
                性别: <input type="radio" name="sex" v-model="info.sex" value="男"> 男 
                <input type="radio" name="sex" v-model="info.sex" value="女">女
            </div>
            <div>
                地址: <select v-model="info.address">
                        <option value=""  selected disabled>请选择</option>
                        <option :value="item" v-for="(item,index) in address">{{item}}</option>
                     </select>
            </div>
            <div>
                爱好：
                <ul>
                    <li v-for="(item,index) in hobby" :key="index">
                        <input type="checkbox" v-model="info.hobby" :value="item">{{item}}
                    </li>
                </ul>
            </div>
            <div>
                建议：<textarea cols="30" rows="10" v-model="info.suggest"></textarea>
            </div>
            {{info}}
            <button type="submit" @click.prevent="sub">提交</button>
        </form>

        <div class="big-box" @click.self="big">
            <div class="small-box" @click.once="small"></div>
        </div>
    </div>
    <script src="vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                info:{
                    username:'',
                    age:'',
                    sex:'',
                    address:'',
                    hobby:[],
                    suggest:''
                },
                hobby:['篮球','足球','排球'],
                address:['河北省','山西省','山东省','吉林省']
            },
            methods:{
                sub(e){
                    // e.preventDefault();
                    
                    console.log("提交")
                },
                big(){
                    console.log('big')
                },
                small(){
                    console.log('small')
                }
            }
        })
    </script>
</body>
</html>